<template>
    <el-form ref="searchFormRef" :model="form" label-width="120px" v-show="visible">
        <el-row>
            <el-col :sm="6">
                <el-form-item label="Activity name" prop="name">
                    <el-input v-model="formModel.name" />
                </el-form-item>
            </el-col>
            <el-col :sm="6">
                <el-form-item label="Activity zone" prop="region">
                    <el-select v-model="formModel.region" placeholder="please select your zone">
                        <el-option label="Zone one" value="shanghai" />
                        <el-option label="Zone two" value="beijing" />
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :sm="12" class="d-flex">
                <el-form-item label="Activity time" prop="date1">
                    <el-date-picker v-model="value1" type="datetimerange" range-separator="To"
                        start-placeholder="Start date" end-placeholder="End date" />
                </el-form-item>
            </el-col>
        </el-row>
        <el-row>
            <el-col :sm="6">
                <el-form-item label="Instant delivery" prop="delivery">
                    <el-switch v-model="formModel.delivery" />
                </el-form-item>
            </el-col>
            <el-col :sm="6">
                <el-button type="primary" @click="onSubmit">搜索</el-button>
                <el-button @click="onReset()">重置</el-button>
            </el-col>
        </el-row>
    </el-form>
</template>

<script setup>
import { ref } from 'vue';

const props = defineProps({ visible: Boolean })

const searchFormRef = ref(null);


const onSubmit = () => {
    console.log('submit!')
}
const onReset = () => {
    searchFormRef.value.resetFields();
}

// do not use same name with ref
const formModel =  ref({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
</script>
